import React, { useState, useEffect } from "react";
import "./car.scss";
import "antd/dist/antd.css";
import store from "../manger/storageUtils";
import { Layout, Button, Input, Form, Modal } from "antd";
const FormItem = Form.Item;
const { Content } = Layout;

export default function Car() {
  const [type, setType] = useState(0);
  const [carNo, setCarNo] = useState("");
  const [phone, setPhone] = useState("");
  const [carList, setCarList] = useState([]);
  const [modal, contextHandle] = Modal.useModal();
  const [search, setSearch] = useState(null);
  // 第二个参数 为空数组 生命周期中只执行一次 否则钩子函数执行便执行
  useEffect(() => {
    setType(0);
    let carList = store.getUser();
    setSearch(null);
    setCarList(carList);
  }, []);

  return (
    <div className="container">
      {contextHandle}
      {/* <h1>欢迎融创1幢业主访问</h1> */}
      <Button
        onClick={() => {
          setType(1);
          setSearch(null);
        }}
      >
        录入车牌
      </Button>
      <br />
      <Button
        onClick={() => {
          setType(2);
          setSearch(null);
        }}
      >
        查询车牌
      </Button>
      <br />
      {type == 1 && (
        <div className="container2">
          <Content style={{ margin: "0 0 0 0" }}>
            <div className="siteView2">
              <div className="whiteView">
                <Form className="form">
                  <FormItem label="车牌号码:" className="formitem">
                    <Input
                      placeholder="请输入车牌号码"
                      value={carNo}
                      onChange={(e) => {
                        setCarNo(e.target.value);
                      }}
                      maxLength={11}
                    />
                  </FormItem>
                  <FormItem label="手机号码:" className="formitem">
                    <Input
                      placeholder="请输入手机号码"
                      value={phone}
                      onChange={(e) => {
                        setPhone(e.target.value);
                      }}
                      maxLength={11}
                    />
                  </FormItem>
                  <Button
                    type="primary"
                    className="confirmBtn"
                    onClick={() => {
                      if (phone.length != 11) {
                        alert("手机号长度有误");
                        return;
                      }
                      if (!/^1[3-9]\d{9}$/.test(phone)) {
                        alert("手机号有误");
                        return;
                      }
                      if (!carList) {
                        let json = {
                          car: carNo,
                          phone: phone,
                        };
                        store.saveUser([json]);
                      } else {
                        let has = -1;
                        for (let i = 0; i < carList.length; i++) {
                          if (carList[i].car == carNo) {
                            has = i;
                            break;
                          }
                        }
                        if (has == -1) {
                          carList.push({
                            car: carNo,
                            phone: phone,
                          });
                          store.saveUser(carList);
                          alert("替换成功");
                        } else {
                          modal.confirm({
                            okText: "替换",
                            title: "该车牌已存在，是否覆盖",
                            cancelText: "取消",
                            onOk: () => {
                              carList.splice(has, 1, {
                                car: carNo,
                                phone: phone,
                              });
                              store.saveUser(carList);
                              setTimeout(() => {
                                alert("替换成功");
                              }, 200);
                            },
                            onCancel: () => {},
                          });
                        }
                      }
                    }}
                  >
                    确定
                  </Button>
                </Form>
              </div>
            </div>
          </Content>
        </div>
      )}
      {type == 2 && (
        <div className="container2">
          <Content style={{ margin: "0 0 0 0" }}>
            <div className="siteView2">
              <div className="whiteView">
                <Form className="form">
                  <FormItem label="车牌号码:" className="formitem">
                    <Input
                      placeholder="请输入车牌号码"
                      value={carNo}
                      onChange={(e) => {
                        setCarNo(e.target.value);
                      }}
                      maxLength={20}
                    />
                  </FormItem>
                  {search && <p>{search}</p>}
                  <Button
                    type="primary"
                    className="confirmBtn"
                    onClick={() => {
                      if (carList) {
                        let has = false;
                        for (let i = 0; i < carList.length; i++) {
                          if (carNo == carList[i].car) {
                            setSearch(
                              `查询结果：当前车牌:${carNo},业主号码为:${phone}`
                            );
                            has = true;
                            break;
                          }
                        }
                        if (!has) {
                          alert("该车牌未登记");
                        }
                      } else {
                        alert("该车牌未登记");
                      }
                    }}
                  >
                    查询
                  </Button>
                </Form>
              </div>
            </div>
          </Content>
        </div>
      )}
    </div>
  );
}
